<template>
	<div class="banding-eamil bg-f5">
		<ul class="bg-white container" style="margin-top:20%">
			<li class="pt15 pb15 border-b layout">
				<input class="fs12 c85 flex_1" type="text" placeholder="请输入您的邮箱账号" v-model="form.email"> 
			</li>
			<li class="pt10 pb10 layout">
				<input class="fs12 c85 flex_1" type="text" placeholder="请输入邮箱验证码" v-model="form.code">
				<button class="border fs10 subject pt5 pb5 pl5 pr5 radius" style="border-color:#ea2000" @click="code">
					<template v-if="sending">{{ minute }} s</template>
					<template v-else>获取验证码</template>
				</button> 
			</li>
		</ul>	
		<button class="btn-button radius block auto fs16 pt10 pb10 w92" :class="{ on : boolean }" style="margin-top:30%" @click="submit">绑定邮箱</button>	
	</div>
</template>

<script>
import { validate } from '@/utils';
	export default{
		data()
		{
			return{
				form : {
					email : '',
					code  : ''
				},
				sending 	: false,
				verify      : false,
				minute    	: 60
			}
		},
		computed:
		{
			boolean()
			{
				var boolean = false;
 				if( this.form.email && this.form.code )
				{
					this.verify = true;
					boolean = true;
				}
				else
				{
					this.verify = false;
					boolean = false;
				}

				return boolean;
			}
		},
		methods:
		{
			submit()
			{
				if( !this.verify ) return;

				if(!validate('email',this.form.email) && !validate('code',this.form.code))
				{
					this.$http.post('/bind/bindEmail',this.form ).then( res=> {
						this.router.replace('/personal/information')
					})
				}
			},
			code()
			{
				let params = {
					email : this.form.email,
					type  : 1
				}
				this.$http.post('/bind/getCode',params).then( res=> {
					this.countDown();
				})
			},
			countDown(){
				this.sending = true;
				var clear = setInterval( () => {
					if( this.minute > 0 ){
						--this.minute;
					}else{
						clearInterval(clear);
						this.sending = false;
						this.minute = 60;
					}
				}, 1000);
			},
		}
	}
</script>

<style lang="less">
	.banding-eamil{
		.on{
			background-color:#ff0036;
			color: white;
		}
	}
</style>
